	<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>爬虫</title>
		<link rel="stylesheet" type="text/css" href="css/normalize.css"/>
		<link rel="stylesheet" type="text/css" href="css/animate.css"/>
		<link rel="stylesheet" type="text/css" href="css/fontello-embedded.css"/>
		<link rel="stylesheet" type="text/css" href="css/common.css"/>
	</head>
	<body>
		<header class="animated fadeInDown clearfix">
			<div class="home-icon">主页</div>
			<span>爬虫管理系统</span>
			
			<div class="user-mesg">
				<span>欢迎你，外国人小姐</span>
				<a href="">安全退出</a>
			</div>
			
		</header>
		<section>
			<div class="main">
				<div class="left animated fadeInLeft">
					<ul>
						<li>
							<div class="li-item">
								<a href="#">任务管理</a>
								<i class="demo-icon icon-angle-right"></i>
							</div>
							<div class="second-element hide" >
								<a href="#">任务进程管理</a>
								<a href="#">任务优先级管理</a>
								<a href="#">调度时间管理</a>
							</div>
							
						</li>
						<li>
							<div class="li-item" >
								<a href="#">站点列表</a>
								<i class="demo-icon icon-angle-right"></i>
							</div>
							<div class="second-element hide">
								<a href="#">站点配置</a>
								<a href="#">板块配置</a>
								<a href="#">规则配置</a>
								<a href="#">不同类型网站规则</a>
							</div>
						</li>
						<li>
							<div class="li-item" >
								<a href="#">数据展现</a>
								<i class="demo-icon icon-angle-right"></i>
							</div>
							<div class="second-element hide">
								<a href="#">站点数据</a>
								<a href="#">自定义频道</a>
							</div>
						</li>
						<li>
							<div class="li-item" >
								<a href="#">任务调度</a>
								<i class="demo-icon icon-angle-right"></i>
							</div>
							<div class="second-element hide">
								<a href="#">待抓取任务</a>
								<a href="#">Redis</a>
								<a href="#">源码抓取</a>
							</div>
						</li>
					</ul>
				</div><!--left end-->
				
				<div class="left2 hide animated fadeInLeft">
					<div data-index="0">
						<i class="demo-icon icon-th-large"></i>
						1
					</div>
					<div data-index="1">
						<i class="demo-icon icon-th-large"></i>
						2
					</div>
					<div data-index="2">
						<i class="demo-icon icon-th-large"></i>
						3
					</div>
					<div data-index="3">
						<i class="demo-icon icon-th-large"></i>
						4
					</div>
					
				</div>
				
				<div class="right">
					<p>123</p>
					<p>123</p>
					<p>123</p>
					<p>123</p>
					<p>123</p>
					<p>123</p>
					<p>123</p>
					<p>123</p>
					<p>123</p>
					<p>123</p>
					<p>123</p>
					<p>123</p>
					<p>123</p>
					<p>123</p>
					<p>123</p>
					<p>123</p>
					<p>123</p>
					<p>123</p>
					<p>123</p>
					<p>123</p>
					<p>123</p>
					<p>123</p>
					<p>123</p>
					<p>123</p>
					<p>123</p>
					<p>123</p>
					<p>123</p>
					<p>123</p>
					<p>123</p>
					<p>123</p>
					<p>123</p>
					<p>123</p>
					<p>123</p>
					<p>123</p>
					<p>123</p>
					<p>123</p>
					<p>123</p>
					<p>123</p>
					<p>123</p>
					<p>123</p>
					<p>123</p>
					<p>123</p>
					<p>123</p>
					<p>123</p>
					<p>123</p>
					<p>123</p>
					<p>123</p>
					<p>123</p>
					<p>123</p>
					<p>123</p>
					<p>123</p>
					<p>123</p>
					<p>123</p>
					<p>123</p>
					<p>123</p>
					<p>sdsdsddsffffffffffffff</p>
					<p>123</p>
					<p>123</p>
					<p>123</p>
					<p>123</p>
					<p>123</p>
					<p>123</p>
					<p>123</p>
					<p>123</p>
					<p>123</p>
					
				</div><!--right end-->
			</div>
		</section>
		
		
		<script src="js/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
		
		   //导航栏的显示与隐藏
		    var index1=0;
		    var index2=[];
		    var temp="";
		    //主页按钮点击事件
			$(".home-icon").click(function(){
				var showType=$(".left").css("display");
				if(showType == "block"){
					$(".left").addClass("hide");
				    $(".left2").removeClass("hide").addClass("show");
				    
				    $(".right").css("margin-left","8rem");//右边自动更换距离
				    
				    $(".left").find(".second-element").hide();
				    
				}
				else{
					$(".left").removeClass("hide").addClass("show");
				    $(".left2").removeClass("show").addClass("hide");
				    
				     $(".right").css("margin-left","20rem");
				}
				
				$(".left2 div").each(function(){
				      temp = $(this).attr("data-index");
				      index2.push(temp);
				})
				
				$.each(index2, function(i) {
					if(index2[i]==index1){
						$(".left2 div").eq(index2[i]).addClass("icon-active").children().css("color","#00D1B2");
						$(".left2 div").eq(index2[i]).siblings().removeClass("icon-active").children().css("color","rgba(0,0,0,0.54)");
						
					}
					
				});
			});
		    
		    
		   //主页导航1
			$(".left ul li .li-item").each(function(){
				this.onclick = function(){
					$(this).siblings().animate({height:'toggle'});
					$(this).parent().siblings().children(".second-element").hide();//同辈元素隐藏
					$(this).addClass("active");
					$(this).children().eq(0).css("color","#FFFFFF");
					
					$(this).children("i").addClass("i-hover");
					
					$(this).parent().siblings().children(".li-item").removeClass("active").children("a").css("color","#222");
					//获取当前点击索引，与主页二的索引比对
					index1 = $(this).parent().index();
					
				}
			})
			//二级菜单的选中样式
			$(".second-element a").each(function(){
				this.onclick = function(){
					$(this).addClass("a-active");
					$(this).siblings().removeClass("a-active");
					
					$(this).parent().parent().siblings().children().eq(1).children().removeClass("a-active");
				}
			})
			//主页导航2
			$(".left2 div").each(function(){
				this.onclick =function(){
					$(this).addClass("icon-active");
					$(this).children().css("color","#00D1B2");
					
					$(this).siblings().children("div").removeClass("icon-active");
					$(this).siblings().children("a").css("color","rgba(0,0,0,0.54)");
					
					var current = $(this).attr("data-index");
					
					index1 = current;
						$(".left").removeClass("hide").addClass("show");
						$(".left2").removeClass("show").addClass("hide");
						
						$(".left ul li .li-item").eq(index1).addClass("active").children("a").css("color","#ffffff");
						
					    $(".left ul li .li-item").eq(index1).siblings().removeClass("hide").addClass("show");
						
						$(".left ul li .li-item").eq(index1).parent().siblings().children(".li-item").removeClass("active").children("a").css("color","#222");
						
						$(".left ul li .li-item").eq(index1).parent().siblings().children(".second-element").removeClass("show").addClass("hide");
						
						$(".right").css("margin-left","20rem");
					
				}
				
			})
			
			
			
			
			
			
		</script>
	</body>
</html>
